<template>
	<view class='recommend'>
		<!-- <view class='title acea-row row-center-wrapper'>
			<text class='iconfont icon-zhuangshixian'></text>
			<text class='name'>热门推荐</text>
			<text class='iconfont icon-zhuangshixian lefticon'></text>
		</view> -->
		<view class="common-hd">
			<view class="title">为你推荐</view>
		</view>
		<!-- <view class='recommendList acea-row row-between-wrapper' :class="indexP?'on':''">
			<view class='item' v-for="(item,index) in hostProduct" :key="index" hover-class='none' @tap="goDetail(item)">
				<view class='pictrue'>
					<image :src='item.shop_goods_image'></image>
					<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '1'">秒杀</span>
					<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '2'">砍价</span>
					<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '3'">拼团</span>
				</view>
				<view class="text">
					<view class='name line1'>{{item.shop_goods_name}}</view>
					<view class="acea-row row-middle">
						<view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
						<text class="coupon font-color-red" v-if="item.issetCoupon">领券</text>
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="exanpleBody">
			<view class="exanpleList">
				<view @click="goGoodDetail(item.product_id)" v-for="(item,index) in hostProduct" :key="index" class="exanpleItem">
					<view class="itemLeft">
						<image class="shopImg" :src="item.image"></image>
						<view class="shopOrder">
							<image src="/static/images/ranking.png"></image>
							<view class="orderNum">{{ index + 1 }}</view>
						</view>
					</view>
					<view class="itemRight">
						<view class="itemTitle">{{ item.store_name }}</view>
						<view class="itemNum">实时销量：{{ item.sales }}件</view>
						<view class="itemPrice">
							<text>¥{{ item.price - item.integral }}</text>
							<text v-if="item.integral" style="color: #fa4e44;">+{{ item.integral }}</text>
							<text v-if="item.integral" style="font-size: 24rpx;color: #fa4e44;">(车币)</text>
							<text class="ot_price">￥{{ item.ot_price }}</text>
							<text class='shopCart iconfont icon-gouwuche1'></text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex";
	export default {
	computed: mapGetters(['uid']),
		props: {
			hostProduct: {
				type: Array,
				default: function() {
					return [];
				}
			},
			indexP:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			goGoodDetail(id) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${id}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.common-hd {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 118rpx;
	
		.title {
			padding: 0 80rpx;
			font-size: 34rpx;
			color: $theme-color;
			font-weight: bold;
			background-image: url("~@/static/images/index-title.png");
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: left center;
		}
	}
	// .recommend {
	// 	background-color: #fff;
	// }

	// .recommend .title {
	// 	height: 135rpx;
	// 	font-size: 28rpx;
	// 	color: #282828;
	// }

	// .recommend .title .name {
	// 	margin: 0 28rpx;
	// }

	// .recommend .title .iconfont {
	// 	font-size: 170rpx;
	// 	color: #454545;
	// }

	// .recommend .title .iconfont.lefticon {
	// 	transform: rotate(180deg);
	// }

	.recommend .recommendList {
		padding: 0 20rpx;
	}
	
	.recommend .recommendList.on{
		padding: 0;
	}

	.recommend .recommendList .item {
		width: 345rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding-bottom: 20rpx;
	}
	
	.recommend .recommendList .item .text{
		padding: 0 20rpx;
	}
	
	.recommend .recommendList .item .coupon{
		background:rgba(255,248,247,1);
		border:1px solid rgba(233,51,35,1);
		border-radius:4rpx;
		font-size:20rpx;
		margin-left: 18rpx;
		padding: 1rpx 4rpx;
	}

	.recommend .recommendList .item .pictrue {
		position: relative;
		width: 230rpx;
		height: 230rpx;
	}

	.recommend .recommendList .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}

	.recommend .recommendList .item .name {
		font-size: 28rpx;
		color: #282828;
		margin: 20rpx 0 10rpx 0;
	}

	.recommend .recommendList .item .money {
		font-size: 20rpx;
		font-weight: bold;
	}

	.recommend .recommendList .item .money .num {
		font-size: 34rpx;
	}
	.exanpleBody {
		// background-color: #FDCDB8;
		overflow: hidden;
		.exanpleList {
			width: 703rpx;
			height: 100%;
			margin: 20rpx auto 0;
			background-color: #F4EFEE;
			.exanpleItem:last-child {
				margin-bottom: 35rpx;
			}
			.exanpleItem {
				display: flex;
				align-items: center;
				background-color: #FFFFFF;
				padding: 20rpx;
				margin-top: 20rpx;
				.itemLeft {
					position: relative;
					width: 182rpx;
					height: 182rpx;
					margin-right: 30rpx;
					.shopImg {
						width: 100%;
						height: 100%;
					}
					.shopOrder {
						position: absolute;
						top: -20rpx;
						left: 15rpx;
						width: 38rpx;
						height: 75rpx;
						image {
							width: 100%;
							height: 100%;
						}
						.orderNum {
							position: absolute;
							bottom: 10rpx;
							left: 50%;
							transform: translateX(-50%);
							font-size: 22rpx;
							color: #FAF9F9;
						}
					}
				}
				.itemRight {
						flex: 1;
						font-size: 27rpx;
						color: #070606;
						padding-top: 10rpx;
					.itemNum {
						width: 310rpx;
						height: 50rpx;
						font-size: 22rpx;
						color: #EF4520;
						background: linear-gradient(90deg, #FDD4C6 0%, #FFF3E3 100%);
						line-height: 50rpx;
						margin: 20rpx 0;
						padding-left: 10rpx;
					}
					.itemPrice {
						position: relative;
						.ot_price {
							font-size: 18rpx;
							text-decoration: line-through;
							color: #74706E;
							margin-left: 10rpx;
						}
						.shopCart {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
							width: 43rpx;
							height: 43rpx;
						}
					}
				}
			}
		}
	}
</style>
